<!-- 页眉 -->
<div class="lv-table-title" *ngIf="lvShowHeader">
  <ng-content select="[lvHeader]"></ng-content>
</div>

<!-- 表格 -->
<div class="lv-table-content lv-table-content-scroll-left" #tableContent>
  <ng-container *ngIf="lvScroll?.x || lvScroll?.y; else tableInnerTemplate">
    <div class="lv-table-scroll" [class.lv-table-vertical-scroll]="lvScroll?.y">
      <ng-template *ngTemplateOutlet="tableInnerTemplate"></ng-template>
    </div>
  </ng-container>
</div>

<!-- 页脚 -->
<div class="lv-table-footer" *ngIf="lvShowFooter">
  <ng-content select="[lvFooter]"></ng-content>
</div>

<!--
  表格：表头 + 表体
  场景1：表体存在滚动时（lvScroll.y）表头，表体分开管理
 -->
<ng-template #tableInnerTemplate>
  <!-- 场景1 -->
  <div
    #tableHeaderElement
    *ngIf="lvScroll?.y"
    class="lv-table-header"
    [style.overflow-x]="'hidden'"
    [style.padding-right]="scrollBarWidth + 'px'"
  >
    <table [class.lv-table-fixed]="lvScroll?.x" [style.width]="lvScroll?.x">
      <ng-template *ngTemplateOutlet="colGroupTemplate"></ng-template>
      <thead #theadElement class="lv-table-thead" *ngIf="lvScroll?.y">
        <ng-template *ngTemplateOutlet="theadComponent?.templateRef"></ng-template>
      </thead>
    </table>
  </div>
  <div
    #tableBodyElement
    *ngIf="!lvVirtualScroll || !renderData?.length; else scrollViewTpl"
    class="lv-table-body lv-table-body-default"
    [class.lv-table-body-loading]="lvLoading"
    [style.maxHeight]="lvScroll?.y"
    [style.height]="lvScroll?.autosize || !renderData?.length || lvLoading ? '' : lvScroll?.y"
    [style.overflow-x]="lvScroll?.x ? 'auto' : ''"
    [style.overflow-y]="lvScroll?.y ? 'scroll' : ''"
  >
    <table [class.lv-table-fixed]="lvScroll?.x" [style.width]="lvScroll?.x">
      <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
      <ng-content></ng-content>
    </table>
    <ng-container *ngTemplateOutlet="nullTpl"></ng-container>
  </div>
  <!-- 虚拟滚动 -->
  <ng-template #scrollViewTpl>
    <ng-container *ngIf="renderData?.length">
      <cdk-virtual-scroll-viewport
        class="lv-table-body lv-table-body-virtual"
        [class.lv-table-body-loading]="lvLoading"
        [itemSize]="lvVirtualItemSize"
        [maxBufferPx]="lvVirtualMaxBuffer"
        [minBufferPx]="lvVirtualMinBuffer"
        [style.height]="lvScroll?.y"
        [style.overflow-y]="lvScroll?.y ? 'scroll' : ''"
        (scrolledIndexChange)="scrolledIndexChange($event)"
        #scrollComponent
      >
        <table [class.lv-table-fixed]="lvScroll?.x" [style.width]="lvScroll?.x">
          <ng-template *ngTemplateOutlet="headerTemplate"></ng-template>
          <tbody>
            <!-- 控制子元素实例化 -->
            <ng-container
              *cdkVirtualFor="
                let item of renderData;
                let index = index;
                let count = count;
                let even = even;
                let first = first;
                let last = last;
                let odd = odd;
                trackBy: lvVirtualTrackBy;
                templateCacheSize: 0
              "
            >
              <ng-container
                *ngTemplateOutlet="
                  _virtualTemplate?.templateRef;
                  context: {
                    $implicit: item,
                    index: index,
                    count: count,
                    even: even,
                    first: first,
                    last: last,
                    odd: odd
                  }
                "
              ></ng-container>
            </ng-container>
          </tbody>
        </table>
      </cdk-virtual-scroll-viewport>
    </ng-container>
  </ng-template>

  <!-- 加载中 -->
  <div class="lv-table-placeholder lv-table-loading" *ngIf="lvLoading">
    {{ 'tableDataLoading' | i18n }}
  </div>
</ng-template>

<ng-template #colGroupTemplate>
  <ng-container *ngIf="!lvResize">
    <ng-content select="colgroup"></ng-content>
    <ng-content select="lv-colgroup"></ng-content>
    <ng-container *ngTemplateOutlet="_colgroupDirective?.templateRef"></ng-container>
  </ng-container>
  <colgroup *ngIf="lvResize" class="lv-colgroup">
    <col *ngFor="let th of ths" [style.width]="th" [ngClass]="{ 'lv-colgroup-auto': th === 'auto' }" />
  </colgroup>
</ng-template>

<!-- 无滚动的表头 -->
<ng-template #headerTemplate>
  <ng-template *ngTemplateOutlet="colGroupTemplate"></ng-template>
  <thead class="lv-table-thead" *ngIf="!lvScroll?.y">
    <ng-template *ngTemplateOutlet="theadComponent?.templateRef"></ng-template>
  </thead>
</ng-template>

<!-- 空 -->
<ng-template #nullTpl>
  <div class="lv-table-placeholder lv-table-null" *ngIf="!lvFake && renderData.length === 0 && !lvLoading">
    <ng-container *ngIf="typeUtils.isTemplateRef(lvNoResult); else defaultNoResult">
      <ng-container *ngTemplateOutlet="lvNoResult; context: { $implicit: lvNoResult }"></ng-container>
    </ng-container>
    <ng-template #defaultNoResult>
      <lv-empty [lvImage]="lvNoResult?.icon" [lvDescription]="lvNoResult?.description"></lv-empty>
    </ng-template>
  </div>
</ng-template>
